<template>
  <div>
    <span style="line-height: 30px">分期：</span>
    <zz-select
      class="inline"
      :border= true
      :options="{width: `${width}`}"
      :option="stageList"
      :name = stageListDefault.stageName
      @optionClick="stageCallback"></zz-select>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'stageList',
    data () {
      return {
        stageName: '',
        stageId: ''
      }
    },
    computed: {
      ...mapGetters({
        stageList: 'getstageList',
        stageListDefault: 'getstageListDefault'
      })
    },
    props: {
      border: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '120px'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      stageCallback (obj) {
        this.$emit('stageCallback', obj)
        this.$store.commit('mustageListDefault', {stageId: obj.key, stageName: obj.value})
      }
    }
  }
</script>
